<template>
	<view class="bigBox">
		<!-- 头像 -->
		<view class="container">
			<view class="intro">
				<button class="image" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="personalInformation.headPortrait" />
				</button>
				<view class="nameOne">
					<view>{{personalInformation.realName}}</view>
					<view>欢迎您：{{personalInformation.departTitl}} {{personalInformation.realName}}</view>
				</view>
			</view>
		</view>
		<!-- 头像下七子页 -->
		<view class="application">
			<view class="lication">
				<view @click="people()">
					<image src="../../static/myBackstage/personal.png"></image>
					个人中心
					<image src="../../static/myBackstage/right.png" class="right"></image>
				</view>
				<view @click="preparation()">
					<image src="../../static/myBackstage/prepares.png" mode=""></image>
					校区备课
					<image src="../../static/myBackstage/right.png" class="right"></image>
				</view>
				<view @click="phone()">
					<image src="../../static/myBackstage/address.png" mode=""></image>
					通讯录
					<image src="../../static/myBackstage/right.png" class="right"></image>
				</view>
				<view @click="file()">
					<image src="../../static/myBackstage/file.png" mode=""></image>
					公司文件
					<image src="../../static/myBackstage/right.png" class="right"></image>
				</view>
				<view @click="student()">
					<image src="../../static/myBackstage/student.png" mode=""></image>
					学生管理
					<image src="../../static/myBackstage/right.png" class="right"></image>
				</view>
				<view @click="revise()">
					<image src="../../static/myBackstage/modify.png" mode=""></image>
					修改密码
					<image src="../../static/myBackstage/right.png" class="right"></image>
				</view>
				<view @click="clear()">
					<image src="../../static/myBackstage/clear.png" mode=""></image>
					清理缓存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				personalInformation: { //用户个人信息
					departTitl: "", //职位
					realName: "", //名字
					headPortrait: "" //头像
				},
			}
		},
		onShow() {
			this.$http(this.$api.userupWechat2).then((res) => {
				if (uni.getStorageSync('token')) {
					this.$store.commit('homePage/GET_PERSON', res.data)
					this.personalInformation.departTitl = res.data.depart.title + res.data.role.name
					this.personalInformation.realName = res.data.real_name
					if (res.data.avatar != '') {
						this.personalInformation.headPortrait = res.data.avatar
					} else {
						this.personalInformation.headPortrait = "../../static/touxiang.png"
					}
				}
			})
		},
		methods: {
			// btn中open-type事件,获取用户头像事件
			onChooseAvatar(e) {
				this.personalInformation.headPortrait = e.detail.avatarUrl
			},
			//跳转到个人中心
			people() {
				this.$tourl('./people')
			},
			//跳转到校区备课
			preparation() {
				this.$tourl('../index/monkey')
			},
			// 跳转到通讯录
			phone() {
				this.$tourl('../index/addressbook')
			},
			// 跳转到公司文件
			file() {
				this.$tourl('./file')
			},
			// 跳转到学生管理
			student() {
				this.$tourl('./student')
			},
			//清理缓存
			clear() {
				try {
					uni.clearStorageSync();
					uni.showToast({
						title: '清理成功',
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} catch (e) {
					console.log(e);
				}
			},
			//修改密码
			revise() {
				uni.navigateTo({
					url: "./revise"
				})
			},
		},
	}
</script>

<style lang="scss">
	/* 头像，昵称 */
	.container {
		width: 100%;
		padding: 140rpx 30rpx 50rpx;
		background: linear-gradient(to right, #A471FC, #77B4F7);
		border-radius: 0 0 40rpx 40rpx;
		display: flex;
		align-items: center;
	}


	.intro {
		/* 头像/信息 */
		margin-top: 50rpx;
		display: flex;
		align-items: stretch;
	}

	.image {
		width: 160rpx;
		height: 160rpx;
		border: none;
		outline: none;
		padding: 0;
		border-radius: 0;
		color: transparent;
		background-color: transparent;

		&::after {
			border: none;
		}
	}

	.image image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-image: url(../../static/touxiang.png);
		background-size: 100%;
		background-color: #F8F8F8;
	}

	.nameOne {
		margin-left: 40rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.nameOne>view:first-child {
		font-size: 35rpx;
		margin: 25rpx 0 40rpx;
	}

	.btnAuth {
		margin-top: 60rpx;
		margin-left: 50rpx;
	}

	/* 头像下七子页 */
	.lication {
		border: 0px red solid;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}

	.lication view {
		border-bottom: 1px #F1F1F1 solid;
		line-height: 50px;
	}

	.lication view:hover {
		background-color: #F1F1F1;
	}

	.lication view image {
		border: 0px red solid;
		width: 40rpx;
		height: 40rpx;
		padding: 0 10px;
		vertical-align: middle;
	}

	.right {
		border: 0px red solid;
		position: absolute;
		right: 0;
		margin: 14px 0;
	}
</style>
